<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font/蓝铅笔/iconfont.css">
    <link rel="stylesheet" href="./font/play/iconfont.css">
    <link rel="stylesheet" href="font/响应式底部/iconfont.css">
    <link rel="stylesheet" href="./CSS/reset.css">
    <link rel="stylesheet" href="./CSS/normalize.css">
    <link rel="stylesheet" href="./CSS/蓝铅笔头部-移动端.css">
    <link rel="stylesheet" href="./CSS/蓝铅笔尾部-移动端.css">
    <link rel="stylesheet" href="./CSS/蓝铅笔移动端-教程.css">
</head>
<body>
    <div class="header-box">
        <div class="header1">
            <div class="header-heart">
                <div class="logo">
                   <a href="#"><img src="./蓝铅笔漫步images/logo.png" alt=""></a> 
                </div>
                <div class="search">
                   <a href="#"><i class="iconfont icon-sousuo"></i></a> 
                </div>
                <div class="login">
                  <div class="login-box">
                    <div class="login-img">
                        <img src="./蓝铅笔漫步images/1.png" alt="">
                    </div>
                    <div class="login-font">
                        <a href="#">登录</a>
                        <a href="#">注册</a>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>
    <div class="adv-box">
        <div class="adv">
            <a href="#"><img src="./蓝铅笔漫步images/164.png" alt=""></a>
        </div>
    </div>
    <div class="apply-box">
    <div class="apply">
        <div class="apply-heart">
            <ul class="apply-heart-ul">
                <li class="apply-heart-ul-li">
                    <a href="#">
                        分类
                    </a>
                </li>
                <li class="apply-heart-ul-li">
                    <a href="#">
                        教程
                    </a>
                </li>
                <li class="apply-heart-ul-li">
                    <a href="#">
                        日系插画
                    </a>
                </li>
                <li class="apply-heart-ul-li">
                    <a href="#">
                        古风插画
                    </a>
                </li>
                <li class="apply-heart-ul-li">
                    <a href="#">
                        游戏原画
                    </a>
                </li>
                <li class="apply-heart-ul-li">
                    <a href="#">
                        商业插画    
                    </a>
                </li>
                <li class="apply-heart-ul-li">
                    <a href="#">
                        纸绘
                    </a>
                </li>
                <li class="apply-heart-ul-li">
                    <a href="#">
                        设计
                    </a>
                </li>
                <li class="apply-heart-ul-li">
                    <a href="#">
                        模型
                    </a>
                </li>
                <li class="apply-heart-ul-li">
                    <a href="#">
                        动画
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
    <div class="adv2">
        <div class="adv2-heart">
            <div class="adv2-img">
                <img src="./蓝铅笔漫步images/166.png" alt="">
            </div>
        </div>
    </div>
    <div class="tutorial">
        <div class="tutorial-heart">
            <div class="tutorial-title">
                <h2><a href="#">精选教程</a></h2>
                <a href="#">
                    <span>筛选课程</span>
                    <i class="iconfont icon-youjiantou"></i>
                </a>
            </div>
            <div class="tutorial-content">
                <ul class="tutorial-content-ul">    
                    <li class="tutorial-content-ul-li">
                        <div class="tutorial-img">
                            <img src="./蓝铅笔漫步images/102.jpg" alt="">
                        </div>
                        <div class="tutorial-font">
                            <h3><a href="#">【Procreate教程】日系梦幻少女头像绘制教程</a></h3>
                            <div class="tutorial-author">
                                <a href="#">
                                    <img src="./蓝铅笔漫步images/42.jpg" alt="">
                                    <span>蒸蒸</span>
                                </a>
                                <span>共一节</span>
                            </div>
                            <div class="tutorial-study">
                                <span>2151616在学</span>
                                <a href="#">免费试看</a>
                            </div>
                        </div>
                    </li>
                    <li class="tutorial-content-ul-li">
                        <div class="tutorial-img">
                            <img src="./蓝铅笔漫步images/103.jpg" alt="">
                        </div>
                        <div class="tutorial-font">
                            <h3><a href="#">【Procreate教程】日系插画常见的线稿、脸部、光影问题分析及解决方法</a></h3>
                            <div class="tutorial-author">
                                <a href="#">
                                    <img src="./蓝铅笔漫步images/42.jpg" alt="">
                                    <span>蒸蒸</span>
                                </a>
                                <span>共三节</span>
                            </div>
                            <div class="tutorial-study">
                                <span>21516在学</span>
                            </div>
                        </div>
                    </li>
                    <li class="tutorial-content-ul-li">
                        <div class="tutorial-img">
                            <img src="./蓝铅笔漫步images/104.jpg" alt="">
                        </div>
                        <div class="tutorial-font">
                            <h3><a href="#">【SAI教程】手把手教你画出宝石之国的钻石质感</a></h3>
                            <div class="tutorial-author">
                                <a href="#">
                                    <img src="./蓝铅笔漫步images/42.jpg" alt="">
                                    <span>蒸蒸</span>
                                </a>
                                <span>共一节</span>
                            </div>
                            <div class="tutorial-study">
                                <span>21556在学</span>
                                <a href="#">免费试看</a>
                            </div>
                        </div>
                    </li>
                    <li class="tutorial-content-ul-li">
                        <div class="tutorial-img">
                            <img src="./蓝铅笔漫步images/105.jpg" alt="">
                        </div>
                        <div class="tutorial-font">
                            <h3><a href="#">【Procreate教程】萌系Q版少女头像画法</a></h3>
                            <div class="tutorial-author">
                                <a href="#">
                                    <img src="./蓝铅笔漫步images/42.jpg" alt="">
                                    <span>蒸蒸</span>
                                </a>
                                <span>共二节</span>
                            </div>
                            <div class="tutorial-study">
                                <span>21586在学</span>
                                <a href="#">免费试看</a>
                            </div>
                        </div>
                    </li>
                    <li class="tutorial-content-ul-li">
                        <div class="tutorial-img">
                            <img src="./蓝铅笔漫步images/106.jpg" alt="">
                        </div>
                        <div class="tutorial-font">
                            <h3><a href="#">【Procreate教程】日系美少年半身像打光教程</a></h3>
                            <div class="tutorial-author">
                                <a href="#">
                                    <img src="./蓝铅笔漫步images/42.jpg" alt="">
                                    <span>蒸蒸</span>
                                </a>
                                <span>共一节</span>
                            </div>
                            <div class="tutorial-study">
                                <span>28816在学</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="small-mask-box">
        <div class="small-mask">
           <div class="small-mask-heart">
               <ul class="small-mask-heart-ul">
                   <li class="small-mask-heart-ul-li">
                       <a href="./蓝铅笔首页-移动端.html">
                           <p><i class="iconfont icon-shouye-shouye"></i></p>
                           <p><span>首页</span></p>
                       </a>
                   </li>
                   <li class="small-mask-heart-ul-li">
                       <a href="./蓝铅笔移动端-教程.html">
                           <p><i class="iconfont icon-diannao"></i></p>
                           <p><span>教程</span></p>
                       </a>
                   </li>
                   <li class="small-mask-heart-ul-li">
                       <a href="./蓝铅笔网校-移动端.html">
                           <p><i class="iconfont icon-wenzhang"></i></p>
                           <p><span>网校</span></p>
                       </a>
                   </li>
                   <li class="small-mask-heart-ul-li">
                       <a href="./蓝铅笔大触-移动端.html">
                           <p><i class="iconfont icon-chengshijinglixianxing"></i></p>
                           <p><span>大触</span></p>
                       </a>
                   </li>
                   <li class="small-mask-heart-ul-li">
                       <a href="./蓝铅笔移动端-社区.html">
                           <p><i class="iconfont icon-taolun"></i></p>
                           <p><span>社区</span></p>
                       </a>
                   </li>
               </ul>
           </div>
        </div>
       </div>
</body>
</html>